<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片相册插件 - 站长素材</title>
<link rel="stylesheet" href="DB_gallery.css" type="text/css"></link>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="js/jquery.DB_gallery.js"></script>
</head>
<body>
<center>
<h3>jquery图片相册插件</h3>

<div id="DB_gallery">

	<div class="DB_imgSet">

		<div class="DB_imgWin"><img src="img/img1.jpg" alt=""/></div>

		<div class="DB_page"><span class="DB_current">0</span>-<span class="DB_total">0</span></div>

		<div class="DB_prevBtn"><img src="img/prev_off.png" alt="jquery相册"/></div>

		<div class="DB_nextBtn"><img src="img/next_off.png" alt="图片相册"/></div>

	</div>

	<div class="DB_thumSet">

		<ul class="DB_thumMove">

			<li><a href="img/img1.jpg"><img src="img/thum1.jpg" alt="图片相册"/></a></li>

			<li><a href="img/img2.jpg"><img src="img/thum2.jpg" alt="jquery相册"/></a></li>

			<li><a href="img/img3.jpg"><img src="img/thum3.jpg" alt="图片相册"/></a></li>

			<li><a href="img/img4.jpg"><img src="img/thum4.jpg" alt="jquery相册"/></a></li>

			<li><a href="img/img5.jpg"><img src="img/thum5.jpg" alt="图片相册"/></a></li>

			<li><a href="img/img6.jpg"><img src="img/thum6.jpg" alt="http://www.kaiwo123.com/"/></a></li>

			<li><a href="img/img1.jpg"><img src="img/thum1.jpg" alt="jquery相册"/></a></li>

			<li><a href="img/img2.jpg"><img src="img/thum2.jpg" alt=""/></a></li>

			<li><a href="img/img3.jpg"><img src="img/thum3.jpg" alt=""/></a></li>

			<li><a href="img/img4.jpg"><img src="img/thum4.jpg" alt=""/></a></li>

			<li><a href="img/img5.jpg"><img src="img/thum5.jpg" alt="网页特效"/></a></li>

			<li><a href="img/img6.jpg"><img src="img/thum6.jpg" alt=""/></a></li>

		</ul>

		<div class="DB_thumLine"></div>

		<div class="DB_prevPageBtn"><img src="img/prev_page.png" alt="上一页"/></div>

		<div class="DB_nextPageBtn"><img src="img/next_page.png" alt="下一页"/></div>


	</div>



</div>

<script type="text/javascript">

	$('#DB_gallery').DB_gallery({

		thumWidth:110,            

		thumGap:8,                

		thumMoveStep:4,           

		moveSpeed:300,            

		fadeSpeed:500            

	});

</script>

</center>

<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari浏览器。</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>

</body>

</html>